<template>
	<u-popup :show="visible" round="16rpx" mode="bottom" @close="hide">
		<view class="product-video-popup">
			<view class="product-video-popup__head">
				<text>产品视频</text>
				<view class="product-video-popup__head-close bg-hover" @tap="hide">
					<u-image width="32rpx" height="32rpx"
						src="https://file.casugn.com/storecompcard/static/img/tips／close@2x_1681978220794.png"></u-image>
				</view>
			</view>
			<view class="product-video-popup__form">
				<u-upload name="video" :fileList="fileList" :multiple="false" :maxCount="1" accept="video"
					@afterRead="afterRead" @delete="deletePic">
					<view class="upload">
						<u-icon name="plus" color="#C9CDD4" size="64rpx"></u-icon>
						<text class="upload-text">点击上传</text>
					</view>
				</u-upload>
			</view>

			<view class="submit-box">
				<u-button v-if="model.id" color="#276AEE" text="保存" throttleTime="500" :loading="loading"
					@click="submit"></u-button>
				<u-button v-else color="#276AEE" text="提交" throttleTime="500" :loading="loading" @click="submit"></u-button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import { mapGetters } from 'vuex'
	import baseConfig from '@/config/baseUrl.js'

	export default {
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
		data() {
			return {
				uploadUrl: baseConfig.uploadUrl + '/sys/common/upload',
				visible: false,
				model: {
					video: '',
				},
				fileList: [],

				loading: false,
			}
		},
		computed: {
			...mapGetters(['userInfo']),
		},
		methods: {
			add() {
				this.edit({})
			},
			edit(record) {
				this.visible = true
				this.model = { id: record.id }
				this.fileList = []
			},
			hide() {
				this.visible = false
			},
			async submit() {
				this.loading = true
				let params = {
					...this.model,
					companyId: this.userInfo.companyId || '',
					video: this.fileList.map(it => it.url).join(','),
					isDel: 0,
				}

				let res = {}
				if (params.id) {
					res = await this.$api.editProductVideo(params)
				} else {
					res = await this.$api.addProductVideo(params)
				}
				this.loading = false
				if (res.success) {
					uni.showToast({ title: '提交成功！', icon: 'none' });
					this.hide()
					this.$emit('refresh')
				} else {
					uni.showToast({ title: res.message || '提交失败！', icon: 'none' });
				}
			},


			// 新增图片
			async afterRead(event) {
				console.log('新增', event);
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: event.name,
						url: result,
						fileName: lists[i].type + lists[i].size + '',
						filePath: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.uploadUrl,
						filePath: url,
						name: 'file',
						success: (res) => {
							let data = JSON.parse(res.data)
							if (data.success) {
								resolve(data.message)
							}
						}
					});
				})
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.product-video-popup {

		.product-video-popup__head {
			position: relative;
			height: 92rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #1D2129;
			line-height: 44rpx;

			display: flex;
			justify-content: center;
			align-items: center;

			.product-video-popup__head-close {
				position: absolute;
				top: 30rpx;
				right: 32rpx;
			}
		}

		::v-deep.product-video-popup__form {
			padding: 24rpx 32rpx;

			.upload {
				// width: 686rpx;
				// height: 320rpx;
				width: 80px;
				height: 80px;
				background-color: #F7F8FA;
				border-radius: 4rpx;

				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.upload-text {
					margin-top: 6rpx;
					font-size: 24rpx;
					color: #86909C;
					line-height: 34rpx;
				}
			}

			.u-upload__wrap {
				justify-content: center;
			}
		}

		.submit-box {
			padding: 0 32rpx 40rpx;
		}
	}
</style>
